<template>
  <div id="app">
    <!-- <HeaderView></HeaderView> -->
    <router-view name="HeaderView"></router-view>
    <nav>
      <!-- 声明式导航 不常用-->
      <!-- path -->
      <!-- <router-link to="/">home页面</router-link>
      <router-link to="/about">about页面</router-link> -->
      <!-- <router-link to="/" tag="button" replace>home页面</router-link>
      <router-link to="/about" tag="button" replace>about页面</router-link> -->

      <!-- name -->
      <!-- <router-link :to="{ name: 'HomeView'}">home页面</router-link>
      <router-link :to="{ name: 'AboutView'}">about页面</router-link> -->

      <!-- 编程式导航 常用-->
      <button @click="goHome">home页面</button>
      <button @click="goAbout">about页面</button>
      <button @click="goUser">user页面</button>
      <button @click="goVuex">findvuex页面</button>
      <button @click="goVuex2">findvuex2页面</button>
      <button @click="goAim">findaim页面</button>
      <button @click="goAim2">findaim2页面</button>
      <button @click="goAim3">findaim3页面</button>
      <button @click="goAim4">findaim4页面</button>
      <button @click="goAim5">findaim5页面</button>
      <button @click="goAim6">findaim6页面</button>
      <button @click="goOther">otherview页面</button>
      <button @click="goFather">fatherview页面</button>
      <button @click="goFatherShow">fathershow页面</button>
    </nav>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <!-- <keep-alive> -->
    <!-- <FatherView></FatherView>
    <OtherView></OtherView> -->
    <router-view></router-view>
    <!-- </keep-alive> -->

  </div>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import FatherView from '@/views/FatherView.vue';
import OtherView from '@/views/OtherView.vue';
export default {
  name: 'App',
  data() {
    return {
      userId: 'www',
      name: 'li',
      profileInfo: {
        name: "zty",
        age: 24,
        height: 177
      }
    }
  },
  provide(){
     return {
      app:this
     }
  },
  components: {
    HeaderView, FatherView, OtherView
  },
  methods: {
    goHome() {
      //  this.$router.push('/')
      this.$router.push({ path: '/' })

      // this.$router.push('HomeView')不行不能直接写name
      // this.$router.push({name:'HomeView'})
    },
    goAbout() {
      //  this.$router.push('/about')
      //  this.$router.push({path:'/about'})


      // this.$router.push('AboutView')不行不能直接写name
      // this.$router.push({name:'AboutView'})

      // 别名
      // this.$router.push({path:'/bbb'})


      // 动态路由传参有两种方式：params和query
      // 只有params进行动态参数传递时，才需要配置动态路由，query不需要
      // name和params搭配    path和query搭配
      // query是以问号的形式在地址栏传参
      // params是以/的形式在地址栏传参

      // this.$router.push({name:'AboutView',params:{userId:this.userId}})
      // this.$router.push({name:'AboutView',params:{userId:this.userId,name:this.name}})
      // this.$router.push({ name: 'AboutView', params: { userId: this.profileInfo } })

      //  this.$router.push({path:'/about',query:{userId:this.userId}})
      // this.$router.push({path:'/about',query:{userId:this.userId,name:this.name}})
      this.$router.push({ path: '/about', query: { userId: this.profileInfo } })


      // this.$router.push({name:'AboutView',query:{userId:this.profileInfo}})可以
      // this.$router.push({path:'/about',params:{userId:this.profileInfo}})不可以

    },
    goUser() {

      // 重点
      this.$router.push('/user')

      // this.$router.replace('/user')

      // let routeData = this.$router.resolve({
      //   path: '/user',
      //   query: {}
      // })
      // console.log('router.resolve()的返回值：', routeData)
      // window.open(routeData.href, '_blank');


      // 知道就行 非重点
      // router.go(1)
      // router.back()//回去
      // router.forward()//向前


      // 1.命名视图
      // 2.导航守卫
      // 3.keep-alive
      // 4.路由元信息
      // 5.滚动行为

    },
    goVuex() {
      this.$router.push('/findvuex')
    },
    goVuex2() {
      this.$router.push('/findvuex2')
    },
    goAim() {
      this.$router.push('/findaim')
    },
    goAim2() {
      this.$router.push('/findaim2')
    },
    goAim3() {
      this.$router.push('/findaim3')
    },
    goAim4() {
      this.$router.push('/findaim4')
    },
    goAim5() {
      this.$router.push('/findaim5')
    },
    goAim6() {
      this.$router.push('/findaim6')
    },
    goOther() {
      this.$router.push('/otherview')
    },
    goFather() {
      this.$router.push('/fatherview')
    },
    goFatherShow() {
      this.$router.push('/fathershow')
    }
  }
}



</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

/* 
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
} */
.active {
  color: #f00;
}
</style>
